<template>
  <el-dialog title="领料详情" :visible.sync="showDialog" top="0" :close-on-click-modal="false" width="90%" @close="cancel">
    <div v-if="selectedItem !== null" class="info-list">
      <div class="list-item">
        <span>加工作业名称：</span>
        <span>{{ selectedItem.taskName }}</span>
      </div>
    </div>
    <el-divider content-position="center">
      <span class="pointer" @click="more = !more">{{ more ? '收起原料需求预估' : '显示原料需求预估' }}</span>
    </el-divider>
    <div v-if="more && materialList.length !== 0" class="material-list">
      <div v-for="(item, index) in materialList" :key="index" class="list-item">
        <span>加工原料：{{ item.materialName }}</span>
        <span>预计领料数量：{{ item.expectNum }} {{ item.unitName || item.material.unitName }}</span>
      </div>
    </div>
    <p>领料记录</p>
    <div class="table-wrapper">
      <el-table v-loading="loading" :data="tableData" stripe border height="300px">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="generationTime" label="领料单创建时间" width="150">
          <template v-if="scope.row.taskId" slot-scope="scope"> {{ scope.row.generationTime | formateTime }} </template>
        </el-table-column>
        <el-table-column prop="productionInventoryNo" label="领料单号" width="150" />
        <el-table-column prop="materialName" label="原料名称">
          <template v-if="scope.row.taskId" slot-scope="scope"> {{ scope.row.goodsList[0].material.materialName }} </template>
        </el-table-column>
        <el-table-column prop="model" label="型号">
          <template v-if="scope.row.taskId" slot-scope="scope"> {{ scope.row.goodsList[0].material.model }} </template>
        </el-table-column>
        <el-table-column prop="materialspec" label="规格">
          <template v-if="scope.row.taskId" slot-scope="scope"> {{ scope.row.goodsList[0].material.materialspec }} </template>
        </el-table-column>
        <el-table-column prop="materialTypeName" label="物料类型">
          <template v-if="scope.row.taskId" slot-scope="scope"> {{ scope.row.goodsList[0].material.materialTypeName }} </template>
        </el-table-column>
        <el-table-column prop="num" label="领料数量">
          <template v-if="scope.row.taskId" slot-scope="scope"> {{ scope.row.goodsList[0].num }} </template>
        </el-table-column>
        <el-table-column prop="unitName" label="单位">
          <template v-if="scope.row.taskId" slot-scope="scope"> {{ scope.row.goodsList[0].material.unitName }} </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template v-if="scope.row.taskId" slot-scope="scope">
            {{ statusMap[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="reviewTime" label="出库时间">
          <template v-if="scope.row.taskId" slot-scope="scope">
            {{ scope.row.reviewTime | formateTime }}
          </template>
        </el-table-column>
      </el-table>
      <Pagination :light="true" :page-size="pageSize" :current-page="currentPage" :total-size="totalSize" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" class="savebtn" @click="cancel()">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import api from '@/api/processing-management/process-task-manage/index';
import Pagination from '@/components/Pagination';
import moment from 'moment';
export default {
  components: { Pagination },
  filters: {
    formateTime: function(value) {
      if (!value) {
        return '';
      }
      return moment(value).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  props: {
    value: Boolean,
    selectedItem: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      statusMap: {
        PEND_RELEASE: '待出库',
        REVIEW: '审核中',
        ALREADY_RELEASED: '已出库',
        REJECTED: '已驳回'
      },
      more: false,
      formDataDefault: {},
      formData: {},
      saveLoading: false,
      showDialog: false,
      loading: false,
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      tableData: [],
      tableDataAll: [],
      nowNum: '',
      materialList: []
    };
  },
  computed: {},
  watch: {
    value(v) {
      this.showDialog = v;
      if (v) {
        this.init();
      }
    }
  },
  created() {
    this.reset();
  },
  mounted() {},
  methods: {
    reset() {
      this.formData = JSON.parse(JSON.stringify(this.formDataDefault));
      this.materialList = [];
      this.more = false;
    },
    init() {
      const { selectedItem, formData } = this;
      if (selectedItem) {
        for (const key in formData) {
          if (Object.hasOwnProperty.call(formData, key)) {
            formData[key] = selectedItem[key];
          }
        }
        this.materialList = selectedItem.taskRawMaterialList;
        this.getList();
      }
    },
    getList() {
      const { selectedItem, currentPage, pageSize } = this;
      this.loading = true;
      api
        .productionInventory({
          page: currentPage,
          size: pageSize,
          entity: {
            taskId: selectedItem.taskId,
            type: 'MATERIAL_REQUISITION'
          }
        })
        .then(res => {
          if (res.code === 1) {
            this.tableData = this.$utils.addblankmet(res.data.content, pageSize);
            this.totalSize = res.data.totalElements;
          }
        })
        .finally(_ => {
          this.loading = false;
        });
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getList();
    },
    close() {
      setTimeout(() => {
        this.reset();
      }, 250);
      this.$emit('input', false);
    },
    cancel() {
      setTimeout(() => {
        this.reset();
      }, 250);
      this.$emit('input', false);
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  min-height: 36px;
  align-items: center;
}
.material-list {
  padding: 24px 47px;
  box-sizing: border-box;
  background: #e9f8fd;
  border-radius: 10px;
  border: 1px solid #c9e0e7;
  .list-item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    span {
      flex: 1;
    }
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}
.info-list {
  display: flex;
  flex-wrap: wrap;
  .list-item {
    flex: 0 0 50%;
    margin-bottom: 10px;
    span {
      font-size: 16px;
      color: #000;
      &:last-of-type {
        font-weight: bold;
      }
    }
  }
}
.table-wrapper {
  position: relative;
  padding-bottom: 50px;
  box-sizing: border-box;
}
::v-deep {
  .el-divider__text {
    background-color: #f0f3f7;
  }
}
</style>
